<template>
    <div class="register">
        <div class="content">
            <div class="left">
                <div class="text_litte">
                    <!--<a class="lianjie" href="./login.html">马上登录</a>-->
                    已有账号?<a><router-link to="/Login">马上登录</router-link></a>
                </div>
                <el-button type="text"></el-button>

                <div class="form_dl">

             <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input type="text" id="user" v-model="ruleForm2.username" auto-complete="off" placeholder="3~20个字符，包含字母/中文/数字/下划线"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input  type="email" v-model.number="ruleForm2.email"></el-input>
                     <input type="checkbox" id="check">我已阅读并接受<a>《版权声明》</a>和<a>《隐私保护》</a>
                </el-form-item>
                <el-form-item>
                    <el-button class="sub" @click="submitForm('ruleForm2')"></el-button>
                </el-form-item>
            </el-form>

                </div>

            </div>
            <div class="right">
                <div class="right_title rw">也可使用以下账号<br>简单注册快人一步</div>
                <input type="button" class="weibo rw" name="weibo">
                <input type="button"class="weixin rw" name="weixin">
                <input type="button" class="QQ rw" name="QQ">
            </div>

        </div>
    </div>
</template>
<script>
    export default{
      data() {
        var checkuser = (rule, value, callback) => {
           if (value === '') {
             callback(new Error('请输入用户名'));
          }
          else{
                var re=/^([\u4e00-\u9fa5]|[0-9a-zA-Z_]){3,20}$/;
                if(re.test(this.ruleForm2.username)==false){
                  callback(new Error('您输入的用户名不符'));
                 }
               callback();
          }
        };
        var checkEmail = (rule, value, callback) => {
            if (value === '') {
             callback(new Error('请输入邮箱'));
           }
          else {
               callback();
          }
        };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
            username:'',
            pass: '',
            checkPass: '',
            email: ''
        },
        rules2: {
            username:[
                {validator: checkuser, trigger: 'blur'}
            ],
            pass: [
                { validator: validatePass, trigger: 'blur' }
            ],
            checkPass: [
                { validator: validatePass2, trigger: 'blur' }
            ],
            email: [
                { validator: checkEmail, trigger: 'blur' }
            ]
        }
      };
    },
    methods: {
        open(val) {
            this.$message({
                type: 'info',
                message: `提示: ${ val }`
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                var _this = this;
                var params = new URLSearchParams();
                params.append('name', this.ruleForm2.username);
                params.append('checkPass', this.ruleForm2.checkPass);
                params.append('email', this.ruleForm2.email);
                params.append('pass', this.ruleForm2.pass);
                this.http.post('/users/register', params).then(
                    function (res) {
                        if(res.data==-1){
                            _this.open("用户名已存在", "提示");
                        }else if(res.data==1){
                            _this.$router.push({path:'/'})
                            _this.$store.commit('setLoginedFn',{status:true})
                            _this.open("注册成功", "提示");
                        }else{
                            _this.open("服务器连接失败", "提示");
                        }
                    }
                ).catch(
                    function (err) {
                        console.log(err);
                    }
                );
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
   }

</script>



<style scoped>
    /*
    * @Author: cql-cql-cql
    * @Date:   2017-03-04 19:16:13
    * @Last Modified by:   cql-cql-cql
    * @Last Modified time: 2017-03-04 19:26:06
    */
    /*css 初始化 */
    html, body, ul, li, ol, dl, dd, dt,p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
        margin: 0;
        padding: 0;
    }

    fieldset, img, input, button {
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
    }

    ul, ol {
        list-style: none;
    }

    input {
        padding-top: 0;
        padding-bottom: 0;
        font-family: "SimSun", "宋体";
    }

    select, input {
        vertical-align: middle;
    }

    select, input, textarea {
        font-size: 12px;
        margin: 0;
    }

    textarea {
        resize: none;
    }

    /*防止拖动*/
    img {
        border: 0;
        vertical-align: middle;
    }

    /*  去掉图片低测默认的3像素空白缝隙*/
    table {
        border-collapse: collapse;
    }

    /*公共类*/
    .w { /*版心 提取 */
        width: 960px;
        margin: 0 auto;
    }
    .fl {
        float: left
    }

    .fr {
        float: right
    }
    .rw{
        width:170px;
        height:45px;
    }

    /*公共类结束*/
    body {
        font: 12px/150% Arial, Verdana, "\5b8b\4f53";
        color: #666;
        background: #F2F2F2
    }

  /*--content  开始*/
    .content{
        margin: 0 auto;
        width: 960px;
        height: 494px;
        background: white;
        margin-top:4px;
    }

    .content .left{
        float: left;
        margin-left:130px;
        margin-top:50px;
        width:530px;

    }

    .left .text_litte{
        font-size: 16px;
        width:180px;
        height:50px;
        float: right;
    }

    .left .form_dl{
        width:480px;
        height:350px;
        float: left;
        margin-left: 40px;
    }
    .sub{
        width:380px;
        height: 45px;
        background: url(../assets/images/register/register_u62.png) no-repeat center;
    }
    .sub:hover{
        background: url(../assets/images/register/register_u64.png) no-repeat center;
    }

    .content .right{
        width:160px;
        height:300px;
        float: right;
        margin-top: 50px;
        margin-right: 50px;

    }
    .right .right_title{
        font-size: 20px;
        text-align: center;
        font-family: '黑体';
        font-weight: 200;
        margin-bottom: 30px;
    }
    .right .weibo{
        margin-bottom: 15px;
        background: url(../assets/images/login/login_u26.png) no-repeat top center;
    }
    /*鼠标移过变亮*/
    .right .weibo:hover{
        background: url(../assets/images/login/login_u28.png) no-repeat top center;
    }

    .right .weixin{
        margin-bottom: 15px;
        background: url(../assets/images/login/login_u31.png) no-repeat top center;
    }
    /*鼠标移过变亮*/
    .right .weixin:hover{
        background: url(../assets/images/login/login_u33.png) no-repeat top center;
    }
    .right .QQ{
        margin-bottom: 15px;
        background: url(../assets/images/login/login_u36.png) no-repeat top center;
    }
    /*鼠标移过变亮*/
    .right .QQ:hover{
        background: url(../assets/images/login/login_u38.png) no-repeat top center;
    }

</style>